<template>
	<view :style="[AppSkinVar]">
		<view class="e-flex e-flex-between e-p-30 e-m-b-20 bg-white">
			<view class="e-flex">
				<view class="tab-item e-m-r-20 text-center" :class="{ 'bg-primary c-white': tabIndex === 1 }"
					@tap="tabChange(1)">
					{{ $t('common.全部') }}
					({{ statistics.totalCount > 999 ? '999+' : statistics.totalCount }})
				</view>
				<view class="tab-item text-center" :class="{ 'bg-primary c-white': tabIndex === 2 }"
					@tap="tabChange(2)">
					{{ $t('classify.有图') }}
					({{ statistics.photoCount > 999 ? '999+' : statistics.photoCount }})
				</view>
			</view>
			<view class="e-font-26">
				{{ $t('classify.好评度') +" " + (statistics.satisfactionRatio || 0) }}
				%
			</view>
		</view>
		<view class="scroll">
			<scroll-view scroll-y @scrolltolower="lowLoading" class="bg-white" lower-threshold="60">
				<view class="e-p-30 " :class="{ 'p-b-0': item.photos&&item.photos.length > 0 }"
					v-for="item in evaluationList" :key="item.id">
					<evaluationItem :info="item">
						<view class="reply-box e-m-t-18 e-font-24" v-if="item.hasStoreReply&&item.contentStoreReply">
							{{$t('common.商家回复')}}：{{item.contentStoreReply}}
						</view>
					</evaluationItem>
					
				</view>
				<load-more v-if="!isEmpty" :showLoad="showLoad"></load-more>
			</scroll-view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,computed} from 'vue'
	import {
		getGoodsEvaluateList,
		getGoodsEvaluateStatistics
	} from '@/common/request/api'
	import type { GoodsEvaluateStatistics,GoodsEvaluateItem} from '@/common/request/api'
	import {
		useQueryPage
	} from '@/common/hooks'
	import evaluationItem from './child/evaluationItem.vue'
	
	const props = defineProps<{
		id:string
	}>()
	
	const statistics = ref<GoodsEvaluateStatistics>( {
		totalCount: 0,
		photoCount: 0,
		satisfactionRatio: 0
	})
	const tabIndex = ref(1)
	const tabChange = (index:number) => {
		tabIndex.value = index
		handleRefresh()
	}
	
	const requestParams = computed(() => {
		return {
			productId: props.id,
			hasPhoto:tabIndex.value === 2 ? 1 : undefined
		}
	})
	
	const {
		showLoad,
		isEmpty,
		list:evaluationList,
		handleQueryPage,
		handleRefresh
	} = useQueryPage<GoodsEvaluateItem>({
		api: getGoodsEvaluateList,
		option: {
			params: requestParams
		},
		pageSize:10
	})
	
	const lowLoading = () => {
		handleQueryPage()
	}
	
	getGoodsEvaluateStatistics({
		productId: props.id
	}).then(res => {
		statistics.value = res.data
	})
	handleRefresh()
	

	
	

</script>

<style lang="scss" scoped>
	.p-b-0 {
		padding-bottom: 0 !important;
	}

	.tab-item {
		min-width: 156rpx;
		height: 60rpx;
		background: #ededed;
		border-radius: 30rpx;
		padding: 0 4rpx;
		@include fontH(26, 60);
	}

	.scroll {
		height: calc(100vh - 140rpx);

		scroll-view {
			height: 100%;
		}
	}

	.reply-box {
		padding: 14rpx 20rpx 20rpx;
		background: #EDEDED;
		border-radius: 10rpx;
		color: #989898;
	}
</style>